import {
  ajaxPromiseObject,
  article,
  commemt,
} from "../../../util/interface.js";
import dom, { ajax, domg } from "../../init.js";
import { obj } from "../../index.js";
import event from "./eventhandle.js";

export function initMyArticle() {
  if (!localStorage.getItem("article")) return alert("当前缓存没文章");
  const data = JSON.parse(localStorage.getItem("article") as string) as article;
  let str = `   
  <h2>index: ArticleInfo</h2>
  <div id="test">
  <h1 id="articleTitle">${data.title}</h1>
  <p class='p1'>
    <span id="articleAuthor" class="iconfont icon-awardjiangzhang">${
      data.author
    }</span>
    <span id="articleBrowesNum" class="iconfont icon-redu">${
      data.browesNum
    }</span>
    <span id="articleComment" class="iconfont icon-pinglun">${
      data.comment
    }</span>
    <span id="articleFontlength" class="iconfont icon-bianji">${
      data.fontlength
    }</span>
    <span id="articleCreatedTime" class="iconfont icon-shijian_o">${
      data.createdTime
    }</span>
    <span>标签:</span>
    <span id="articleLabel">${data.label}</span>
    </p>
    <hr>
    <div id="articleContent">${data.content}</div>
    <div id='comments' style="margin-top:100px">
    <div class="comment">
      <h2 style="">评论↓↓↓↓</h2>
      <hr style="width: 98.8%;">
    </div>
    <div class='commentinput'>
      <textarea id="commentcontent" index=${
        data.id
      } resize:none; cols="20" rows="10" placeholder='发一条友好的评论....'></textarea>
      <div class="box">
        <div class="button">${obj.islogin ? "发送评论" : "登录注册"}</div>
        <div class='commentcount'>已有<span class="allcommentcount">${
          data.ArticleComments.length
        }</span>条评论</div>
      </div>
    </div>
    <ul class="commentlist">
    </ul>
  </div>`;
  dom.content.content.innerHTML = str;
  const button = domg("#comments .commentinput .button") as HTMLElement;
  //根据登录状态来决定给button按钮绑定什么事件
  button.onclick = obj.islogin
    ? event.articlecommentsubmit
    : () => {
        dom.user.mubu.style.display = "block";
      };

  updatecommentlist(data.ArticleComments);
  //判断是否有锚点链接
  console.log(location.hash, 11111);

  if (location.href.includes("#")) {
    setTimeout(() => {
      location.href = location.href;
    }, 1000);
  }
}
function updatecommentlist(arr: any) {
  if (arr.length <= 0) {
    return (domg("#comments ul.commentlist").innerHTML =
      "<h3>没有数据或者数据出错</h3>");
  }
  arr.forEach((item: any, index: any) => {
    const str = `      
    <li id='MyArticleComment${index}'>
      <div class="commentuser" data-index=${item.ArticleId}>
        <div class="commentuserimg" style="background-image: url('${
          item.imgUrl
        }')"></div>
        <div class="contentuserinfo">
          <p class="username">${item.name} ${
      item.name == dom.user.name.innerText ? '<span class="my">我</span>' : ""
    }</p>
          <p class="usercreatedtime">${item.createdTime}</p>
        </div>
      </div>
      <div class="content">
        ${item.content}
      </div>
      <hr>
    </li>`;
    const ul = domg("#comments ul.commentlist");
    ul.insertAdjacentHTML("beforeend", str);
  });
}
